<template>
  <div class="search-container">
    <!-- 搜索区域 -->
    <div class="search-header">
      <div class="search-title">全文检索</div>
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入搜索关键词，支持IK中文分词..."
          class="search-input"
          clearable
          @keyup.enter.native="handleSearch"
        >
          <i slot="prefix" class="el-icon-search"></i>
          <el-button slot="append" type="primary" @click="handleSearch">搜索</el-button>
        </el-input>
        <div class="search-tips">
          <i class="el-icon-info"></i>
          支持智能中文分词搜索，例如：南京 档案馆 历史
        </div>
      </div>
    </div>

    <!-- 搜索结果区域 -->
    <div class="search-results" v-loading="loading">
      <!-- 搜索统计 -->
      <div class="results-header" v-if="total > 0">
        <span class="results-count">找到 {{ total }} 条相关结果</span>
        <span class="results-time">耗时 {{ searchTime }}ms</span>
      </div>

      <!-- 结果列表 -->
      <div class="results-list" v-if="total > 0">
        <el-card v-for="(item, index) in list" 
                 :key="index"
                 class="result-item"
                 :class="{ 'is-active': activeIndex === index }"
                 @click.native="handleItemClick(index)">
          
          <!-- 结果标题/摘要 -->
          <div class="item-header">
            <div class="item-title">
              <span class="item-dh">档号: {{ item._source.dh }}</span>
              <el-link 
                type="primary"
                :underline="false"
                :href="`/graphquery/docview?id=${item._id}&searchContent=${searchKeyword}`"
              >
                <i class="el-icon-view"></i> 查看原文
              </el-link>
            </div>
            <div class="item-summary" v-html="item.highlight.content[0]"></div>
          </div>

          <!-- 展开的详细内容 -->
          <div v-show="activeIndex === index" class="item-detail">
            <div class="detail-content" v-html="currentDetail"></div>
          </div>
        </el-card>
      </div>

      <!-- 无结果提示 -->
      <el-empty 
        v-if="total === 0 && !loading"
        :description="searchKeyword ? '未找到相关内容' : '请输入关键词进行搜索'"
      >
        <template #image>
          <i class="el-icon-search" style="font-size: 60px; color: #909399;"></i>
        </template>
      </el-empty>

      <!-- 分页器 -->
      <div class="pagination-wrapper" v-if="total > 0">
        <el-pagination
          background
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { artApi } from "@/api/art";

export default {
  name: 'Fulltext',
  
  data() {
    return {
      // 搜索相关
      searchKeyword: '',
      loading: false,
      searchTime: 0,
      
      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 0,
      
      // 数据相关
      list: [],
      activeIndex: null,
      currentDetail: '',
    }
  },

  created() {
    // 从URL参数中获取搜索关键词
    const keyword = this.$route.query.keyword
    if (keyword) {
      this.searchKeyword = keyword
      this.handleSearch()
    }
  },

  methods: {
    // 执行搜索
    async handleSearch() {
      if (!this.searchKeyword.trim()) {
        this.$message.warning('请输入搜索关键词')
        return
      }

      this.currentPage = 1
      this.fetchSearchResults()
    },

    // 获取搜索结果
    async fetchSearchResults() {
      try {
        this.loading = true
        const startTime = Date.now()

        const params = {
          content: this.searchKeyword,
          page: this.currentPage,
          limit: this.pageSize
        }
        
        const response = await artApi('getDocumentQwjsPage', params)
        
        if (response.code === 200) {
          this.list = response.data.resultList
          this.total = response.totalCount
          this.searchTime = Date.now() - startTime
          this.activeIndex = null
          this.currentDetail = ''
        } else {
          this.$message.error('搜索失败，请重试')
        }
      } catch (error) {
        console.error('搜索出错：', error)
        this.$message.error('搜索服务异常，请稍后重试')
      } finally {
        this.loading = false
      }
    },

    // 点击结果项
    async handleItemClick(index) {
      if (this.activeIndex === index) {
        this.activeIndex = null
        this.currentDetail = ''
        return
      }

      try {
        this.activeIndex = index
        const item = this.list[index]
        
        const response = await artApi('getfulltxtById', {
          _id: item._id,
          searchContent: this.searchKeyword
        })
        
        if (response.code === 200) {
          this.currentDetail = response.data.highlight.content[0]
        }
      } catch (error) {
        console.error('获取详情失败：', error)
        this.$message.error('获取详情失败，请重试')
      }
    },

    // 分页处理
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchSearchResults()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchSearchResults()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-container {
  padding: 20px;
  min-height: calc(100vh - 40px);
  background-color: #f5f7fa;

  .search-header {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    margin-bottom: 20px;

    .search-title {
      font-size: 24px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 20px;
      text-align: center;
    }

    .search-box {
      max-width: 800px;
      margin: 0 auto;

      .search-input {
        ::v-deep .el-input__inner {
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          border-right: 0;
          padding-left: 45px;
          &:hover, &:focus {
            border-color: #409EFF;
          }
        }

        ::v-deep .el-input__prefix {
          left: 15px;
          .el-icon-search {
            font-size: 20px;
            line-height: 50px;
            color: #909399;
          }
        }

        ::v-deep .el-input-group__append {
          background-color: #409EFF;
          border-color: #409EFF;
          .el-button {
            padding: 15px 25px;
            font-size: 16px;
            color: #fff;
            border: none;
            &:hover {
              background-color: #66b1ff;
            }
          }
        }
      }

      .search-tips {
        margin-top: 10px;
        color: #909399;
        font-size: 13px;
        .el-icon-info {
          margin-right: 5px;
        }
      }
    }
  }

  .search-results {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    min-height: 400px;

    .results-header {
      padding: 0 0 15px;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .results-count {
        font-size: 16px;
        color: #303133;
        font-weight: 500;
      }
      
      .results-time {
        color: #909399;
        font-size: 14px;
      }
    }

    .result-item {
      margin-bottom: 16px;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      &.is-active {
        border-color: #409EFF;
      }

      .item-header {
        .item-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .item-dh {
            font-size: 15px;
            color: #606266;
          }
        }

        .item-summary {
          color: #303133;
          line-height: 1.6;
          ::v-deep em {
            color: #409EFF;
            font-style: normal;
            font-weight: bold;
            padding: 0 2px;
          }
        }
      }

      .item-detail {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #ebeef5;

        .detail-content {
          color: #606266;
          line-height: 1.8;
          ::v-deep em {
            color: #409EFF;
            font-style: normal;
            font-weight: bold;
            padding: 0 2px;
          }
        }
      }
    }
  }

  .pagination-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>
  